nav{
    width: 100%;
    font-size: 16px;
    height: 74px;
    background-color: rgba(255, 255, 255, 1);
    position: relative;
    // top: 0;
    // left: 0;
    z-index: 2000;
    .pc_width{position: relative;}
    .main{
        position: relative;
    }
    .navTotal{
        .logo{
            img{
                width: 103px;
                height: 74px;
                cursor: pointer;
            }
        }
        .toolBar{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-grow: 1;
            margin-left: 40px;
            line-height: 16px;
            div{
                margin-left: 40px;
                color: rgb(0, 0, 0);
                cursor: pointer;
            }
            div:hover{
                color: #cb242b;
                span:before{background-image: url('/img/categories_hover.png');}
            }
            .all_categories{
                span:before{
                    margin-right: 4px;
                    content: "";
                    display: block;
                    width: 16px;
                    height: 16px;
                    line-height: 16px;
                    background-image: url('/img/categories.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center;
                }
            }
        }
        .searchLogo{
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto 4px auto 16px;
            width: 25px;
            height: 25px;
            background-image: url('/img/search.png');
            background-size: 25px 25px;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.6;
            cursor: pointer;
        }
        .searchLogo:hover{opacity: 1;}
    }
    .searchDetail{
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        .top{
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 74px;
            background-color: rgba(255, 255, 255, 1);
            position: relative;
            .search_detail{
                margin-right: 19px auto;
                padding: 0 24px;
                z-index: 1000;
                .search_input_container{
                    flex-direction: row;
                    width: 592px;
                    height: 36px;
                    background-color: rgba(0, 0, 0, 0.05);
                    border: 1px solid rgba(0, 0, 0, 0);
                    border-radius: 18px;
                    .svg_logo,.close_logo{
                        box-sizing: content-box;
                        justify-content: center;
                        align-items: center;
                        padding-left: 2px;
                        padding-right: 10px;
                        width: 36px;
                        height: 36px;
                        
                        background-size: 15px 15px;
                        background-position: 13px 10px;
                        background-repeat: no-repeat;
                        opacity: 0.8;
                        cursor: pointer;
                    }
                    .svg_logo{
                        background-image: url('/img/search.png');
                    }
                    .close_logo{
                        padding-left: 0;
                        padding-right: 7px;
                        background-size: 14px 14px;
                        background-image: url('/img/close.png');
                    }
                    .svg_logo:hover,.close_logo:hover{opacity: 1;}
                    .input{
                        margin-left: -11px;
                        flex-grow: 1;
                        height: 100%;
                        input{
                            width: 100%;
                            height: 100%;
                            outline: none;
                            font-family: "Microsoft YaHeiUI";
                            color: rgb(25, 25, 25);
                            vertical-align: middle;
                            line-height: 18px;
                            font-size: 13px;
                            border: 0;
                            background-color: rgba(0, 0, 0, 0);
                            opacity: 0.7;
                        }
                    }
                }
            }
            .search_discovery{
                position: absolute;
                top: 70px;
                padding: 4px 0 24px 0;
                width: 640px;
                background-color: rgba(255, 255, 255, 1);
                border-bottom-right-radius: 16px;
                border-bottom-left-radius: 16px;
                z-index: 1000;
                .search_discovery_container{
                    flex-direction: column;
                    .title{
                        justify-content: space-between;
                        align-items: center;
                        margin: 12px 0 4px 0;
                        padding: 0 34px 0 24px;
                        height: 24px;
                        line-height: 24px;
                        span{
                            color: rgb(0, 0, 0);
                            font-size: 16px;
                        }
                        img{
                            width: 16px;
                            height: 16px;
                            opacity: 0.5;
                            cursor: pointer;
                        }
                        img:hover{opacity: 1;}
                    }
                    .recommendList{
                        background-color: rgba(255, 255, 255, 1);
                        ul{
                            margin: 12px 24px 0 24px;
                            flex-direction: row;
                            align-items: center;
                            flex-wrap: wrap;
                            li{
                                margin: 0 8px 12px 0;
                                padding: 0 8px;
                                line-height: 28px;
                                font-size: 12px;
                                text-align: center;
                                opacity: 0.9;
                                background-color: rgba(0, 0, 0, 0.05);
                                border-radius: 14px;
                                cursor: pointer;
                            }
                            li:hover{
                                opacity: 1;
                                color: #cb242b;
                            }
                        }
                    }
                }
            }
        }
        .bottom{
            height: 100vh;
            flex-grow: 1;
            cursor: pointer;
            background-color: rgb(0, 0, 0);
            opacity: 0.3;
        }
    }


    // 左侧分类+左右切换
    .all_categories_leftNavBox{
        width: 1200px;
        height: 550px;
        position: absolute;
        top: 74px;
        right: 0;
        left: 0;
        margin: auto;
        // 左侧分类
        .leftNav{
            position: absolute;
            // left: 160px;
            // left: 30px;
            top: 27px;
            .main{
                box-shadow: 0 0 36px rgba(0, 0, 0, 0.1);
                flex-direction: row;
            }
            .firstNav{
                flex-direction: column;
                padding-top: 8px;
                padding-bottom: 8px;
                height: 496px;
                background-color: rgba(255, 255, 255, 1);
                .firstNavList{
                    width: 200px;
                    height: 40px;
                    position: relative;
                    cursor: pointer;
                    span{
                        display: block;
                        align-items: center;
                        font-size: 14px;
                        color: rgb(0, 0, 0);
                        opacity: 0.6;
                        line-height: 40px;
                    }
                    .left{
                        justify-content: flex-start;
                        padding-left: 24px;
                        width: 80%;
                    }
                    .right{
                        width: 20%;
                        position: relative;
                    }
                    .right::after{
                        margin: auto;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        content: "";
                        display: block;
                        width: 12px;
                        height: 12px;
                        background-image: url('/img/icon03.svg');
                        background-position: -64px -2px;
                    }

                    .secondNav{
                        display: none;
                        position: absolute;
                        left: 200px;
                        // top: -8px;
                        z-index: 100;
                        padding: 20px 16px 0 16px;
                        width: 470px;
                        height: 496px;
                        background-color: rgba(255, 255, 255, 1);
                        box-shadow: 30px 0px 36px rgba(0, 0, 0, 0.12);
                        overflow: hidden;
                        ul{
                            width: 100%;
                            height: 100%;
                            flex-direction: column;
                            justify-content: flex-start;
                            align-content: flex-start;
                            flex-wrap: wrap;
                            li{cursor: pointer;}
                            .moreList{
                                box-sizing: content-box;
                                margin-bottom: 23px;
                                margin-right: 16px;
                                width: 214px;
                                height: 72px;
                                align-items: center;
                                justify-content: flex-start;
                                flex-direction: row;
                                img{
                                    margin-left: 8px;
                                    width: 52px;
                                    height: 52px;
                                }
                                span{
                                    display: block;
                                    margin-left: 8px;
                                    color: rgb(0, 0, 0);
                                    opacity: 0.6;
                                    line-height: 52px;
                                    font-size: 14px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                            // 查看全部
                            .seeAll{
                                margin: 13px 0 0 14px;
                                width: 136px;
                                height: 44px;
                                .seeAllBox{
                                    width: 136px;
                                    height: 44px;
                                    background-image: url('/img/chaImage.png');
                                    background-repeat: no-repeat;
                                    background-size: cover;
                                    background-position: center center;
                                    span{
                                        display: block;
                                        width: 77px;
                                        margin-left: 56px;
                                        line-height: 44px;
                                        opacity: 0.4;
                                        font-size: 13px;
                                        color: rgb(0, 0, 0);
                                        text-align: left;

                                    }
                                }
                            }
                            li:hover span{color: #cb242b;opacity: 1;}
                        }
                    }
                    // 手机
                    &.phone .secondNav{width: 470px; top: -8px;}
                    // 电脑
                    &.computer .secondNav{width: 706px; top: -48px;}
                    // 平板
                    &.pad .secondNav{width: 470px; top: -88px;}
                    // 智慧屏
                    &.smart_screen .secondNav{width: 470px; top: -128px;}
                    // 穿戴
                    &.wearing .secondNav{width: 470px; top: -168px;}
                    // 耳机音箱
                    &.headphone_speakers .secondNav{width: 470px; top: -208px;}
                    // 门锁路由
                    &.door_lock_routing .secondNav{width: 235px; top: -248px;}
                    // 配件
                    &.fittings .secondNav{width: 706px; top: -288px;}
                    // 生态产品
                    &.ecological_products .secondNav{width: 470px; top: -328px;}
                    // 家用电器
                    &.household_appliances .secondNav{width: 706px; top: -368px;}
                    // 美食酒饮
                    &.food_drinks .secondNav{width: 235px; top: -408px;}
                    // 增值服务/企业商用
                    &.value_added .secondNav{width: 706px; top: -448px;}

                    &.phone:hover,&.computer:hover,&.pad:hover,&.smart_screen:hover,&.wearing:hover,
                    &.headphone_speakers:hover,&.door_lock_routing:hover,&.fittings:hover,
                    &.ecological_products:hover,&.household_appliances:hover,&.food_drinks:hover,
                    &.value_added:hover{
                        .more{display: block;}
                    }
                }
                .firstNavList:hover{
                    background-color: rgba(255, 255, 255, 1);
                }
                .firstNavList:hover .left{
                    opacity: 1;
                }
            }
        }
    }
    
}